<template>
  <ul>
    <p>ID:  {{$route.params.id}}</p>
    <li>id: {{messageDetails.id}}</li>
    <li>title: {{messageDetails.title}}</li>
    <li>content: {{messageDetails.content}}</li>
  </ul>
</template>

<script>

export default {
  data() {
    return {
      messageDetails: {}
    }
  },

  mounted() {
    setTimeout(() =>{
      const allMessageDetails = [
        {
          id: 1,
          title: `message01`,
          content: `message01 content....`
        },
        {
          id: 2,
          title: `message02`,
          content: `message02 content....`
        },
        {
          id: 3,
          title: `message03`,
          content: `message03 content....`
        },
      ]
      this.allMessageDetails = allMessageDetails
      const id = this.$route.params.id*1
      this.messageDetails = allMessageDetails.find(detail => detail.id === id)
    },1000)
  },

  watch: {
    $route: function (value){  // 路由路径（param）发生了改变
      const id = value.params.id*1
      this.messageDetails = this.allMessageDetails.find(detail => detail.id === id)
    }
  }
}
</script>

<style>

</style>
